<template>
  <!-- 添加请款单-->
  <div class="pay-item">
    <a-form ref="formRef" :model="detailInfo" :rules="rules">
      <a-row :gutter="20">
        <a-col :span="7">
          <a-form-item label="应付对象：" label-col-flex="100px">
            <p>
              <span>{{ detailInfo.supplierName }}</span>
              <span style="color: #999">({{ detailInfo.supplierCode }})</span>
            </p>
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item field="urgentStatus" label="紧急程度：" label-col-flex="90px">
            <a-select v-model="detailInfo.urgentStatus" placeholder="请选择">
              <a-option :value="0" label="正常" />
              <a-option :value="1" label="加急" />
              <a-option :value="2" label="紧急" />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="gmtExpectedPayment" label="期望付款日期：" label-col-flex="120px">
            <a-date-picker v-model="detailInfo.gmtExpectedPayment" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="7">
          <a-form-item label="类型：" label-col-flex="100px">
            <p>{{ `货款${detailInfo.settleType === 1 ? '现结' : '月结'}` }}</p>
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item field="user.id" label="申请人：" label-col-flex="90px">
            <a-select v-model="detailInfo.user" value-key="id" placeholder="请选择">
              <a-option v-for="(user, index) in userList" :key="index" :value="user" :label="user.userName" />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="申请日期：" label-col-flex="120px">
            <p>{{ $setTime(dayjs(), 'YYYY-MM-DD') }}</p>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="24">
          <a-form-item field="payeeInfo.id" label="收款信息：" label-col-flex="100px">
            <div class="flex-c">
              <a-select v-model="detailInfo.payeeInfo" value-key="id" placeholder="请选择" style="width: 200px">
                <a-option v-for="(account, j) in supplierAccounts" :key="j" :value="account" :label="account.payee" />
              </a-select>
              <div class="payeeInfo flex-c" v-if="detailInfo.payeeInfo && detailInfo.payeeInfo.id">
                <div>
                  <p>
                    <span class="label">收款类型：</span>
                    <span>{{ detailInfo.payeeInfo.type === 1 ? '公司' : '个人' }}</span>
                  </p>
                  <p>
                    <span class="label">开户银行：</span>
                    <span>{{ detailInfo.payeeInfo.bank }}</span>
                  </p>
                </div>
                <div style="margin-left: 30px">
                  <p>
                    <span class="label">银行卡号：</span>
                  </p>
                  <p>{{ detailInfo.payeeInfo.account }}</p>
                </div>
              </div>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item field="remark" label="备注：" label-col-flex="100px">
            <a-textarea v-model="detailInfo.remark" placeholder=" " allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="附件：" label-col-flex="90px">
            <div>
              <a-tag style="margin-bottom: 5px" color="arcoblue" v-if="detailInfo.attachment" closable>{{ detailInfo.attachment }}</a-tag>
              <a-upload action="/" :custom-request="uplaodFile" :show-file-list="false">
                <template #upload-button>
                  <a-button size="mini" type="outline">
                    <template #icon>
                      <icon-upload />
                    </template>
                    <template #default>上传附件</template>
                  </a-button>
                </template>
              </a-upload>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-table class="table-two-line" ref="tableRef" :data="detailInfo.orderPoolParams" :scroll="{ x: '100%' }" size="mini" :pagination="false">
      <template #columns>
        <a-table-column data-index="sort" title="序号" :width="45" fixed="left">
          <template #cell="{ rowIndex }">
            <p>{{ rowIndex + 1 }}</p>
          </template>
        </a-table-column>
        <a-table-column title="采购单号" :width="110" fixed="left" v-if="detailInfo.settleType === 1">
          <template #cell="{ record }">
            <a-space :size="4">
              <p class="highlight">{{ record.purchaseNo || '--' }}</p>
              <CopyText :val="record.purchaseNo" class="popup-edit-icon-hover" />
            </a-space>
            <p style="color: #999">{{ purchaseStatusMap[record.purchaseStatus] }}</p>
          </template>
        </a-table-column>
        <a-table-column title="交货单号" :width="110" fixed="left" v-if="detailInfo.settleType === 2">
          <template #cell="{ record }">
            <a-space :size="4">
              <p class="highlight">{{ record.deliveryNo || '--' }}</p>
              <CopyText :val="record.deliveryNo" class="popup-edit-icon-hover" />
            </a-space>
            <p style="color: #999">{{ purchaseStatusMap[record.purchaseStatus] }}</p>
          </template>
        </a-table-column>
        <a-table-column title="付款状态" :width="70">
          <template #cell="{ record }">
            <p>{{ payStatusMap[record.paymentStatus] }}</p>
          </template>
        </a-table-column>
        <a-table-column title="请款状态" :width="70">
          <template #cell="{ record }">
            <p>{{ requestStatusMap[record.requestStatus] }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="purchaseAmt" :width="65" v-if="detailInfo.settleType === 1">
          <template #title>
            <a-popover content="本采购单的采购数量 减去 截单数量">
              <p>
                <span>采购数</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column data-index="deliveryAmt" :width="65" v-if="detailInfo.settleType === 2">
          <template #title>
            <a-popover content="该交货单的交货数量">
              <p>
                <span>交货数</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column data-index="warehouseAmt" :width="75">
          <template #title>
            <a-popover content="该交货单的实际入库数量">
              <p>
                <span>已入库数</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column data-index="purchaseAmount" :width="110" v-if="detailInfo.settleType === 1">
          <template #title>
            <a-popover content="采购金额=采购数量X单价">
              <p>
                <span>采购金额</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>含税：￥{{ record.purchaseAmount }}</p>
            <p>税额：￥{{ record.purchaseTaxAmount }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="inventoryAmount" :width="110" v-if="detailInfo.settleType === 2">
          <template #title>
            <a-popover content="采购金额=采购数量X单价">
              <p>
                <span>到货金额</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>含税：￥{{ record.inventoryAmount }}</p>
            <p>税额：￥{{ record.inventoryTaxAmount }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="paidAmount" :width="80">
          <template #title>
            <a-popover content="已完成支付的请款单金额">
              <p>
                <span>已付金额</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>￥{{ record.paidAmount }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="unpaidAmount" :width="80">
          <template #title>
            <a-popover content="未支付金额=到货金额-已支付金额">
              <p>
                <span>未付金额</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>￥{{ record.unpaidAmount }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="requestAmount" :width="90">
          <template #title>
            <a-popover content="请款中金额=请款单状态为待支付">
              <p>
                <span>请款中金额</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>￥{{ record.requestAmount }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="unRequestAmount" :width="90">
          <template #title>
            <a-popover content="未请款金额=采购金额-已付金额-请款中金额">
              <p>
                <span>未请款金额</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>￥{{ record.unRequestAmount }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="" title="本次请款金额" :width="110">
          <template #title>
            <p>
              <span class="warningColor">*</span>
              <span>本次请款金额</span>
            </p>
          </template>
          <template #cell="{ record }">
            <a-input-number :min="0" :max="record.unRequestAmount" v-model="record.requestPrice" placeholder="" />
          </template>
        </a-table-column>

        <a-table-column title="操作" :width="50">
          <template #cell="{ rowIndex }">
            <a-space>
              <a-popconfirm v-if="detailInfo.orderPoolParams.length > 1" content="确定是否移除?" @ok="detailInfo.orderPoolParams.splice(rowIndex, 1)" type="error">
                <a-button type="text">移除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <div class="total-w">
      <p>
        <span class="label">未请款金额：</span>
        <span>￥{{ unRequestAmountTotal }}</span>
      </p>
      <p>
        <span class="label">本次请款金额：</span>
        <span>￥{{ requestPriceTotal }}</span>
      </p>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, PropType, computed } from 'vue'
  import dayjs from 'dayjs'
  import { upload } from '@/api/base'
  import { Message } from '@arco-design/web-vue'

  const props = defineProps({
    detail: {
      type: Object,
      default: () => {},
    },
    userList: {
      type: Array as PropType<Array<any>>,
      defult: () => [],
    },
    supplierAccounts: {
      type: Array as PropType<Array<any>>,
      defult: () => [],
    },
  })

  const unRequestAmountTotal = computed(() => {
    return detailInfo.value?.orderPoolParams?.reduce((acc: number, item: any) => {
      acc += Number(item.unRequestAmount || 0)
      return acc
    }, 0)
  })
  const requestPriceTotal = computed(() => {
    return detailInfo.value?.orderPoolParams?.reduce((acc: number, item: any) => {
      acc += Number(item.requestPrice || 0)
      return acc
    }, 0)
  })

  const purchaseStatusMap = {
    0: '已作废',
    1: '草稿中',
    10: '待审核',
    20: '待接单',
    30: '待交货',
    40: '交货中',
    50: '已交货',
    60: '已完成',
    61: '已截单',
  }
  const payStatusMap = {
    10: '未付款',
    20: '部分付款',
    30: '已付款',
  }
  const requestStatusMap = {
    10: '未请款',
    20: '部分请款',
    30: '已请款',
    40: '已结束请款',
  }
  console.log(props.detail)
  const detailInfo = ref<any>(JSON.parse(JSON.stringify(props.detail)))
  const formRef = ref()
  const rules = ref({
    urgentStatus: [{ required: true, message: '请选择紧急成功' }],
    gmtExpectedPayment: [{ required: true, message: '请选择期望付款日期' }],
    'user.id': [{ required: true, message: '请选择申请人' }],
    'payeeInfo.id': [{ required: true, message: '请选择收款方' }],
  })

  // 上传附件
  async function uplaodFile(options: any) {
    let { fileItem } = options
    let formData = new FormData()
    formData.append('file', fileItem.file)
    const res: any = await upload(formData)
    if (res?.data?.publicUrl) {
      detailInfo.value.attachment = res.data.publicUrl
    }
  }
  // 校验信息
  async function validateData() {
    let valid = await formRef.value.validate((valid: any) => {
      return valid
    })
    if (valid) return false
    if (!detailInfo.value?.orderPoolParams?.length) {
      Message.error('最少需要一个请款明细')
      return false
    }
    for (let item of detailInfo.value.orderPoolParams) {
      let num = Number(item.requestPrice || 0)
      if (num <= 0) {
        Message.error('本次请款金额必填且必须大于0')
        return false
      }
    }
    return true
  }
  defineExpose({ validateData, detailInfo: detailInfo.value })
</script>
<style lang="less" scoped>
  .pay-item {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .payeeInfo {
    font-size: 12px;
    margin-left: 10px;
    .label {
      color: #999;
    }
  }
  .total-w {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
    p {
      font-weight: bold;
      text-align: right;
      margin-left: 30px;
    }
    .label {
      color: #999;
      font-weight: normal;
    }
  }
</style>
